import React from 'react'
import {Table, Breadcrumb, Message, FormItem, Form, Button, Input} from '@hi-ui/hiui/es'
import {getUserList, getUserFriends} from '../action/index'
import '../layer.css'
import {Loading, Modal} from "@hi-ui/hiui";
import {messageModal} from "../../../common/date";


class User extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            current: 1,
            pageSize: 10,
            key: '',
            total: 0,
            showLoading: false,
            userFriendsShow: false,
            userFriends: ''
        }
    }

    columns = [
        {title: '用户ID', dataKey: 'id', align: 'right', key: '1'},
        {
            title: '好友集',
            align: 'right',
            key: '2',
            render: (text, row, index) => {
                return <Button type="primary" appearance="link" onClick={() => {
                    this.loadUserFriends(row.id)
                }}>数据查看</Button>
            }
        },
        {title: '签到频率', dataKey: 'frequency', align: 'right', key: '3'}
    ]

    breadCrumbs = [
        {content: '用户数据', path: ''},
        {content: '用户签到', path: ''}
    ]

    async componentDidMount() {
        await this.loadUserList()
    }

    loadUserFriends(userId) {
        getUserFriends(userId).then(res => {
            if (res.code === 200) {
                this.setState({
                    userFriendsShow: true,
                    userFriends: res.data.friends
                })
            } else {
                messageModal('warning', res.message)
            }
        }).finally((err) => {

        })
    }

    userFriendsModal() {
        const {userFriendsShow, userFriends} = this.state
        return <Modal
            title="用户好友查看"
            size={"large"}
            closeable={false}
            visible={userFriendsShow}
            style={{borderRadius: '5px', opacity: 0.8, backgroundColor: '#ffffff'}}
            onCancel={() => {
                this.setState({
                    userFriendsShow: false
                })
            }}
            footer={null}>
            <div>
                {userFriends.toString().replaceAll(';', '\n')}
            </div>
        </Modal>
    }

    loadUserList(current = this.state.current, pageSize = this.state.pageSize, key = this.state.key) {
        this.setState({
            showLoading: true
        })
        getUserList({pageNum: current, pageSize: pageSize, key: key}).then(res => {
            console.log('user', res)
            if (res.code === 200) {
                this.setState({
                    list: res.data.records,
                    current: res.data.current,
                    total: res.data.total
                })
            } else {
                Message.open({
                    type: 'warning',
                    title: res.message
                })
            }
        }).finally((err) => {
            this.setState({
                showLoading: false
            })
        })


    }


    render() {
        return (
            <div className={'bodycontent'}>
                <Breadcrumb data={this.breadCrumbs} onClick={(path) => {
                    console.log('go path: ', path)
                }}/>
                <div className={'bodycard'}>
                    <Form placement='horizontal' labelPlacement='right'>
                        <FormItem>
                            <Input placeholder='请输入' clearable={true} value={this.state.key} onChange={(e, val) => {
                                this.setState({
                                    key: val
                                })
                            }}/>
                        </FormItem>
                        <FormItem>
                            <Button type='line' onClick={() => {
                                this.loadUserList()
                            }}>查询</Button>
                        </FormItem>
                    </Form>
                    <Loading content={'loading...'} visible={this.state.showLoading}>
                        <Table columns={this.columns} data={this.state.list} pagination={{
                            pageSize: this.state.pageSize,
                            total: this.state.total,
                            current: this.state.current,
                            pageSizeOptions: [10, 20, 50],
                            showTotal: true,
                            onPageSizeChange: (val, current) => {
                                this.setState({
                                    current: current,
                                    pageSize: val
                                })
                                this.loadUserList(current, val)
                            },
                            onChange: (page, pre, size) => {
                                console.log(page, pre, size)
                                this.setState({
                                    current: page,
                                    pageSize: size
                                })
                                this.loadUserList(page, size)
                            }
                        }}/>
                    </Loading>
                </div>
                {this.userFriendsModal()}
            </div>
        )
    }
}

export default User
